/* =========================================================
   Outcome Impact block (Business Impact + Leadership answers)
   File: wwwroot/css/outcome-impact.css
   Used by: Views/Partials/blocklist/Components/outcomeImpactBlock.cshtml
   Fluid layout — same scaling as the other Outcome blocks.
   ========================================================= */

.oc-imp {
  box-sizing: border-box;
  --oc-bg: #152662;
  --oc-card: #0f1c45;
  --oc-orange: #ff9a45;
  --oc-green: #2fd48b;
  --oc-soft: #d3d9e8;
  --oc-gutter: 6.8vw;

  width: 100%;
  background: var(--oc-bg);
  padding: clamp(48px, 6.7vw, 170px) var(--oc-gutter) clamp(48px, 4.7vw, 120px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
.oc-imp *, .oc-imp *::before, .oc-imp *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- BADGE + HEADINGS ---------- */
.oc-imp__badge {
  display: inline-block;
  background: var(--oc-orange);
  color: #fff;
  font-size: clamp(10px, 0.72vw, 18px);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0.75em 1.1em;
  border-radius: 3px;
  margin-bottom: clamp(14px, 1.45vw, 38px);
}
.oc-imp h2 {
  font-weight: 600;
  font-size: clamp(22px, 1.95vw, 50px);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
}
.oc-imp h2 span { color: var(--oc-orange); }

/* ---------- METRICS ---------- */
.oc-imp__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 42px);
  margin-top: clamp(18px, 2.1vw, 54px);
  list-style: none;
}
.oc-imp__metric {
  background: var(--oc-card);
  padding: clamp(18px, 1.7vw, 44px);
  min-height: clamp(96px, 8.8vw, 226px);
}
.oc-imp__metric-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(18px, 2.3vw, 60px);
}
.oc-imp__metric-label {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, 0.9vw, 23px);
  font-weight: 500;
  line-height: 1.35;
}
.oc-imp__trend {
  flex-shrink: 0;
  width: clamp(16px, 1.3vw, 34px);
  height: clamp(16px, 1.3vw, 34px);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.oc-imp__trend--up   { stroke: var(--oc-green); }
.oc-imp__trend--down { stroke: var(--oc-orange); }
.oc-imp__metric-value {
  font-size: clamp(19px, 1.55vw, 40px);
  font-weight: 700;
  line-height: 1.2;
}

/* ---------- LEADERSHIP ---------- */
.oc-imp__answers-heading { margin-top: clamp(40px, 4.5vw, 116px); }

.oc-imp__leaders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 62px);
  margin-top: clamp(18px, 2.1vw, 54px);
  list-style: none;
}
.oc-imp__leader {
  background: var(--oc-card);
  padding: clamp(22px, 2.2vw, 56px);
  min-height: clamp(220px, 22.7vw, 580px);
}
.oc-imp__audience {
  font-size: clamp(11px, 0.8vw, 21px);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--oc-orange);
  margin-bottom: 0.35em;
}
.oc-imp__leader h3 {
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 36px);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
}
.oc-imp__points {
  list-style: none;
  margin-top: clamp(18px, 1.8vw, 46px);
  display: grid;
  gap: clamp(12px, 1.15vw, 30px);
}
.oc-imp__points li {
  position: relative;
  padding-left: 2em;
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(12px, 0.86vw, 22px);
  line-height: 1.55;
  color: var(--oc-soft);
}
.oc-imp__points li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.35em;
  width: 0.85em;
  height: 0.45em;
  border-left: 2px solid var(--oc-orange);
  border-bottom: 2px solid var(--oc-orange);
  transform: rotate(-45deg);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .oc-imp { --oc-gutter: 32px; }
  .oc-imp__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-imp__leaders { grid-template-columns: 1fr; }
  .oc-imp__leader { min-height: 0; }
}
@media (max-width: 560px) {
  .oc-imp { --oc-gutter: 20px; }
  .oc-imp__metrics { grid-template-columns: 1fr; }
  .oc-imp__metric { min-height: 0; }
}